<div class="container-xl">
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">近期下载</h2>
      </div>
    </div>
  </div>
</div>
{% if Count > 0 %}
  <div class="page-body">
    <div class="container-xl">
      <div class="row row-cards" id="downloaded_content">
        {% for item in Items %}
          <div class="col-6 col-sm-4 col-md-3 col-xl-2">
            <div class="card card-sm card-link-pop rounded-4 border-1 shadow"
              style="--tblr-border-opacity: 1;border-color:rgb(128, 128, 128);overflow: hidden;"
              onclick="if(is_touch_device()){showCardMore('{{ item.ID }}')}"
              onmouseover="if(!is_touch_device()){showCardMore('{{ item.ID }}')}"
              onmouseout="if(!is_touch_device()){hideCardMore('{{ item.ID }}')}">
              <!-- 占位图 -->
              <div class="placeholder-glow" id="downloaded_placeholder_{{ item.ID }}">
                <div class="ratio placeholder rounded-4" style="--tblr-aspect-ratio:150%;"></div>
              </div>
              <div id="downloaded_link_{{ item.ID }}" style="display: none">
                <div class="ratio" style="--tblr-aspect-ratio:150%;">
                  <img src="{{ item.POSTER or '../static/img/no-image.png' }}"
                       onerror="this.src='../static/img/no-image.png'"
                       onload="loadImage('{{ item.ID }}')"
                       class="card-img"
                       alt="">
                </div>
                <span class="badge badge-pill {% if item.TYPE == '电影' %}bg-green{% else %}bg-blue{% endif %}"
                  style="position:absolute;top:10px;left:10px;">{{ item.TYPE }}</span>
                {% if item.VOTE > '0.0' %}
                  <div class="badge badge-pill bg-purple"
                     style="position:absolute;top:10px;right:10px;">{{ item.VOTE }}</div>
                {% endif %}
              </div>
              <div class="card-img-overlay ms-auto" id="downloaded_card_more_{{ item.ID }}"
                  onclick='show_mediainfo_modal("{% if item.TYPE == "电影" %}MOV{% else %}TV{% endif %}", "{{ item.TITLE }}", "{{ item.YEAR }}", "{{ item.TMDBID }}")'
                  style="display: none; background-color:rgba(0,0,0,0.5);">
                <div style="cursor: pointer">
                  <div class="text-white"><strong>{{ item.SITE }}</strong></div>
                  <h2 class="lh-sm text-white"
                    style="margin-bottom: 5px; -webkit-line-clamp:3; display: -webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis;">
                    <strong>{{ item.TITLE }}</strong></h2>
                  <p class="lh-sm text-white"
                    style="margin-bottom: 5px; -webkit-line-clamp:4; display: -webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis;">
                    {{ item.TORRENT }}
                  </p>
                  <p class="lh-sm text-white"
                    style="margin-bottom: 5px; -webkit-line-clamp:4; display: -webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis;">
                    <small>{{ item.DATE }}</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
{% else %}
  <div class="page-body">
    <div class="container-xl d-flex flex-column justify-content-center">
      <div class="empty">
        <div class="empty-img"><img src="./static/img/posting_photo.svg" height="128" alt="">
        </div>
        <p class="empty-title" id="search_tip_title">没有记录</p>
        <p class="empty-subtitle text-muted" id="search_tip_text">
          近期没有下载任何影视资源
        </p>
      </div>
    </div>
  </div>
{% endif %}
<script type="text/javascript">
  //状态标记
  var loading = false;
  var CurrentPage = 1;

  // 载入图片成功后隐藏占位符
  function loadImage(id){
    $(`#downloaded_placeholder_${id}`).hide();
    $(`#downloaded_link_${id}`).show();
  }

  // 鼠标移到卡片时显示更多
  var lastCardmoreID = "";
  function showCardMore(id) {
    if (is_touch_device() && lastCardmoreID) {
      hideCardMore(lastCardmoreID);
    }
    lastCardmoreID = id;
    $(`#downloaded_card_more_${id}`).show();
  }

  // 鼠标移出卡片时隐藏更多
  function hideCardMore(id) {
    $(`#downloaded_card_more_${id}`).hide();
  }

  // 插入N个占位卡片 代替loading动画
  var page_card_num = {{ Count }};
  function add_loading_card_placeholder() {
    for (let i = 0; i < page_card_num; i++) {
      let html = ''
      html += '<div class="col-6 col-md-3 col-xl-2" id="loading_card_placeholder_' + i + '">';
        html +='<div class="card card-sm rounded-4" style="--tblr-border-opacity: 1;border-color:rgb(128, 128, 128);overflow: hidden;">';
          html += '<div class="placeholder-glow">';
            html += '<div class="ratio placeholder rounded-4" style="--tblr-aspect-ratio:150%;"></div>';
          html += '</div>';
        html += '</div>';
      html += '</div>';
      $("#recommend_content").append(html);
    }
  }

  // 移除占位卡片
  function del_loading_card_placeholder() {
    $("div[id^='loading_card_placeholder_']").each(function(){
      $(this).remove();
    })
  }

  // 加载更多
  function loading_data() {
    if (loading) {
      return;
    }
    loading = true;
    CurrentPage++;
    add_loading_card_placeholder();
    ajax_post("get_downloaded", {"page": CurrentPage}, function (ret) {
      if (ret.Items.length > 0) {
        loading = false;
      }
      del_loading_card_placeholder();
      // 插入HTML
      for (let i = 0; i < ret.Items.length; i++) {
        let current_tooltip_id = "recommend_fresh_tooltip_" + ((CurrentPage - 1) * 30 + i);
        let item = ret.Items[i];
        let html = '';
        html += '<div class="col-6 col-sm-4 col-md-3 col-xl-2">'
        html += '<div class="card card-sm card-link-pop rounded-4 border-1 shadow" style="--tblr-border-opacity: 1;border-color:rgb(128, 128, 128);overflow: hidden;" onclick="if(is_touch_device()){showCardMore('+item.ID+')}" onmouseover="if(!is_touch_device()){showCardMore('+item.ID+')}" onmouseout="if(!is_touch_device()){hideCardMore('+item.ID+')}">';
        html += '<div class="placeholder-glow" id="downloaded_placeholder_'+item.ID+'">';
        html += '<div class="ratio placeholder rounded-4" style="--tblr-aspect-ratio:150%;"></div>';
        html += '</div>';
        html += '<div id="downloaded_link_'+item.ID+'" style="display: none">';
        html += '<div class="ratio" style="--tblr-aspect-ratio:150%;">';
        let poster = item.POSTER;
        if (!poster) {
          poster = '../static/img/no-image.png';
        }
        html += '<img src="'+poster+'" onerror="this.src=\'../static/img/no-image.png\'" onload="loadImage('+item.ID+')"  class="card-img" alt="">';
        html += '</div>';
        if (item.TYPE == '电影') {
          html += '<span class="badge badge-pill bg-green" style="position:absolute;top:10px;left:10px;">' + item.TYPE + '</span>';
        } else {
          html += '<span class="badge badge-pill bg-blue" style="position:absolute;top:10px;left:10px;">' + item.TYPE + '</span>';
        }
        if (item.VOTE) {
          html += '<div class="badge badge-pill bg-purple" style="position:absolute;top:10px;right:10px;">' + item.VOTE + '</div>';
        }
        html += '<div class="card-img-overlay ms-auto" id="downloaded_card_more_'+item.ID+'"';
        let meida_type = item.TYPE == "电影" ? "MOV":"TV";
        html += ' onclick=\'show_mediainfo_modal("'+meida_type+'", "'+item.TITLE+'", "'+item.YEAR+'", "'+item.TMDBID+'")\'';
        html += ' style="display: none; background-color:rgba(0,0,0,0.5);">';
        html += '<div style="cursor: pointer">';
        html += '<div class="text-white"><strong>'+item.SITE+'</strong></div>';
        html += '<h2 class="lh-sm text-white" style="margin-bottom: 5px; -webkit-line-clamp:3; display: -webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis;">';
        html += '<strong>'+item.TITLE+'</strong></h2>';
        html += '<p class="lh-sm text-white" style="margin-bottom: 5px; -webkit-line-clamp:4; display: -webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis;">';
        html += item.TORRENT + '</p>';
        html += '<p class="lh-sm text-white" style="margin-bottom: 5px; -webkit-line-clamp:4; display: -webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis;">';
        html += '<small>'+item.DATE+'</small></p>';
        html += '</div></div>';
        debugger;
        $("#downloaded_content").append(html);
        //更新tooltip
        let recommendTooltipList = Array.prototype.slice.call(document.querySelectorAll('#' + current_tooltip_id))
        let tooltipList = recommendTooltipList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl)
        });
      }
    });
  }

  $(document).ready(function () {
    $(".page-wrapper").scroll(function () {
      if ($(window).height() + $(this).scrollTop() >= $("#page_content").height() + 50) {
        loading_data();
      }
    });
  });
</script>